import { Cell, Field, Input, Divider, Image, Toast } from "@taroify/core";
import Button from "@taroify/core/button/button";
import { View } from "@tarojs/components";
import {
  LocationOutlined,
  PhoneOutlined,
  EnvelopOutlined,
  ContactOutlined,
} from "@taroify/icons";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "@/store";
import { useEffect, useState } from "react";
import { requestPOST } from "@/request";
import Taro from "@tarojs/taro";
import { setActive } from "@/store/reducers/tabbar";

export default function HomeFooter() {
  const contactInfo = useSelector(
    (state: RootState) => state.concat.contactInfo
  );

  const dispatch = useDispatch();

  let timer;

  const [form, setForm] = useState({
    code: "",
    email: "",
    password: "",
  });
  const [time, setTime] = useState(0);
  const [loading, setLoading] = useState(false);
  const [imgs, setImages] = useState<any[]>([]);

  const sendEmailCode = () => {
    if (time > 0) return;
    if (!form.email) {
      Toast.open("Please fill in your email address");
      return;
    }

    requestPOST(`other/getCode/${form.email}`).then(() => {
      Toast.open({ type: "success", message: "success" });
      let time = 60;
      timer = setInterval(() => {
        if (time <= 0) {
          clearInterval(timer);
        }
        setTime(--time);
      }, 1000);
    });
  };

  const handleSubmit = () => {
    if (!form.email) {
      Toast.open("Please fill in your email address");
      return;
    }
    if (!form.code) {
      Toast.open("Please Fill in the verification code");
      return;
    }
    if (!form.password) {
      Toast.open("Please fill in your password");
      return;
    }
    setLoading(true);
    requestPOST("other/registerEmail", { ...form })
      .then(() => {
        Toast.open({ type: "success", message: "success" });
      })
      .finally(() => {
        setLoading(false);
      });
  };

  const getImages = () => {
    requestPOST("index/getIndexBottomNavigation").then((res: any) => {
      setImages(
        res.map((item) => ({
          ...item,
          navigationImage: process.env.TARO_APP_API + item.navigationImage,
        }))
      );
    });
  };

  const gotoRegister = () => {
    Taro.navigateTo({
      url: "/packages/supplierRegister/index",
    });
  };

  useEffect(() => {
    getImages();
  }, []);

  return (
    <View style={{ padding: "14px 0px", background: "#273037", color: "#fff" }}>
      <View style={{ padding: "0 14px 14px 14px" }}>Buyer join for free</View>
      <View>
        <Cell.Group inset>
          <Field label="email">
            <Input
              onChange={(e) => setForm({ ...form, email: e.detail.value })}
              placeholder="Please fill in your email address"
            />
          </Field>
          <Field>
            <Input
              onChange={(e) => setForm({ ...form, code: e.detail.value })}
              placeholder="Fill in the verification code"
            />
            <Button
              disabled={time > 0}
              color="primary"
              size="small"
              onClick={() => sendEmailCode()}
            >
              {time > 0 ? time + "s" : "Verify Mailbox"}
            </Button>
          </Field>
          <Field label="password">
            <Input
              onChange={(e) => setForm({ ...form, password: e.detail.value })}
              placeholder="Set Password"
            />
          </Field>
        </Cell.Group>
        <View style={{ padding: "14px" }}>
          <Button
            loading={loading}
            color="primary"
            block
            onClick={() => handleSubmit()}
          >
            Buyer Register Now !
          </Button>
        </View>
      </View>
      <View style={{ padding: "0 14px" }}>
        <Divider />
        <View>CONTACT INFO</View>
        <View
          style={{
            fontSize: "13px",
            display: "flex",
            flexDirection: "column",
            gap: "5px",
            marginTop: "10px",
            color: "#aaa",
          }}
        >
          <View
            style={{
              display: "flex",
              alignItems: "center",
              gap: "5px",
              color: "#666",
            }}
          >
            <LocationOutlined size={16} />
            Address:
          </View>
          <View style={{ paddingLeft: "20px" }}>{contactInfo.address}</View>
          <View
            style={{
              display: "flex",
              alignItems: "center",
              gap: "5px",
              color: "#666",
            }}
          >
            <PhoneOutlined size={16} />
            Phone/Wechat:
          </View>
          <View style={{ paddingLeft: "20px" }}>{contactInfo.phone}</View>
          <View
            style={{
              display: "flex",
              alignItems: "center",
              gap: "5px",
              color: "#666",
            }}
          >
            <ContactOutlined size={16} />
            QQ:
          </View>
          <View style={{ paddingLeft: "20px" }}>{contactInfo.qq}</View>
          <View
            style={{
              display: "flex",
              alignItems: "center",
              gap: "5px",
              color: "#666",
            }}
          >
            <EnvelopOutlined size={16} />
            Email:
          </View>
          <View style={{ paddingLeft: "20px" }}>{contactInfo.email}</View>
        </View>
        <Divider />
        <View>CONTACT US</View>
      </View>
      <View>
        <Cell
          titleStyle={{ flex: "2" }}
          style={{
            background: "transparent",
            color: "#aaa",
            paddingBottom: "0px",
          }}
          title="About Us"
          isLink
          bordered={false}
          onClick={() => {
            Taro.switchTab({ url: "/pages/about/index" });
            dispatch(setActive(2));
          }}
        ></Cell>
        <Cell
          titleStyle={{ flex: "2" }}
          style={{
            background: "transparent",
            color: "#aaa",
            paddingBottom: "0px",
          }}
          onClick={() => {
            Taro.navigateTo({
              url: "/packages/help/index",
            });
          }}
          title="Buyer Help center"
          isLink
          bordered={false}
        ></Cell>
        <Cell
          titleStyle={{ flex: "2" }}
          style={{
            background: "transparent",
            color: "#aaa",
            paddingBottom: "0px",
          }}
          title="Supplier Help center"
          onClick={() => {
            Taro.navigateTo({
              url: "/packages/helpCenter/index",
            });
          }}
          isLink
          bordered={false}
        ></Cell>
        <Cell
          titleStyle={{ flex: "2" }}
          style={{
            background: "transparent",
            color: "#aaa",
            paddingBottom: "0px",
          }}
          title="Article help Center"
          onClick={() => {
            Taro.navigateTo({
              url: "/packages/statusVal/index",
            });
          }}
          isLink
          bordered={false}
        ></Cell>
        <Cell
          titleStyle={{ flex: "2" }}
          style={{
            background: "transparent",
            color: "#aaa",
            paddingBottom: "0px",
          }}
          title="Want to get quotations?"
          onClick={() => {
            Taro.navigateTo({
              url: "/packages/quoation/index",
            });
          }}
          isLink
          bordered={false}
        ></Cell>
      </View>
      <View style={{ padding: "14px" }}>
        <Button onClick={() => gotoRegister()} color="primary" block>
          供应商免费注册
        </Button>
        <Divider />
        <View>SHARING</View>
        <View
          style={{
            display: "flex",
            alignItems: "center",
            flexWrap: "wrap",
            gap: "5px",
            marginTop: "10px",
          }}
        >
          {imgs.map((item, index) => (
            <Image
              key={index}
              shape="circle"
              src={item.navigationImage}
              width={35}
              height={35}
              mode="aspectFit"
            />
          ))}
        </View>
      </View>
    </View>
  );
}
